// system-app 通用样式配置
// 参考 Ant Design Pro 标准

// 应用容器样式 - Ant Design Pro 标准
.app-container {
  background-color: #f0f2f5; // Ant Design Pro 标准背景色
  padding: 16px; // Ant Design Pro 标准内边距
  min-height: 100%;
}

// 通用间距类 - Ant Design Pro 标准
.mb8 {
  margin-bottom: 8px;
}

.mb16 {
  margin-bottom: 16px;
}

.mb24 {
  margin-bottom: 24px;
}

.head-container {
  margin-bottom: 16px; // 增加到 Ant Design Pro 标准间距
}

// 优化卡片间距 - Ant Design Pro 标准
.el-card {
  margin-bottom: 16px; // Ant Design Pro 标准卡片间距
  border: 1px solid #f0f0f0;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  
  :deep(.el-card__body) {
    padding: 24px; // Ant Design Pro 标准内边距
  }
  
  // 搜索表单卡片
  &.search-form-card {
    padding: 24px 24px 0;
    margin-bottom: 16px;
    
    :deep(.el-card__body) {
      padding: 24px 24px 0;
    }
  }
  
  // 表格卡片
  &.table-card {
    margin-bottom: 16px;
    
    :deep(.el-card__body) {
      padding: 24px;
    }
  }
}

// Ant Design Pro 标准表格样式
:deep(.el-table) {
  margin-bottom: 0;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.85);
  background-color: #ffffff;
  border-radius: 2px;
  overflow: hidden;
  
  // Ant Design Pro 标准表格行高
  .el-table__row {
    height: 54px !important; // Ant Design Pro 标准行高
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  
  // 优化表格单元格内边距 - Ant Design Pro 标准
  td.el-table__cell {
    padding: 12px 16px !important; // Ant Design Pro 标准内边距
    border-bottom: 1px solid #f0f0f0 !important;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);
  }
  
  // 优化表头高度 - Ant Design Pro 标准
  th.el-table__cell {
    height: 54px !important; // Ant Design Pro 标准表头高度
    padding: 12px 16px !important;
    background-color: #fafafa !important;
    color: rgba(0, 0, 0, 0.85) !important;
    font-weight: 500 !important; // Ant Design Pro 标准字重
    font-size: 14px !important;
    border-bottom: 1px solid #f0f0f0 !important;
  }
  
  // 优化表格内容行间距
  .el-table__body tr {
    height: 54px !important;
  }
  
  // 优化表格边框和分割线
  .el-table__border-left-patch,
  .el-table__border-right-patch {
    background-color: #f0f0f0;
  }
  
  // 优化悬停效果 - Ant Design Pro 标准
  .el-table__row:hover > td {
    background-color: #fafafa !important; // Ant Design Pro 标准悬停色
    cursor: pointer;
  }
  
  // 选中行样式
  .current-row > td {
    background-color: #e6f7ff !important;
  }
}

// 表格容器滚动优化 - 根据数据量自适应，无内部滚动
:deep(.el-table__body-wrapper) {
  // 移除高度限制，让表格根据数据量自适应
  overflow-y: visible !important; // 移除内部滚动
  overflow-x: hidden !important; // 隐藏横向滚动
  
  // 自定义滚动条样式 - 更细更美观
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  
  &::-webkit-scrollbar-track {
    background: transparent; // 透明轨道
    border-radius: 3px;
  }
  
  &::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2); // 半透明滚动条
    border-radius: 3px;
    
    &:hover {
      background: rgba(0, 0, 0, 0.4);
    }
  }
}

// 表格容器高度优化 - 根据内容自适应
:deep(.data-table-wrapper) {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  // 移除固定高度，让容器根据内容自适应
  // 移除 flex 布局，让容器自然流式布局
  
  // 减少表格容器的内边距
  .el-table {
    border-radius: 4px;
    overflow: hidden;
    // 移除 flex: 1，让表格根据内容自适应高度
  }
  
  // 确保表格容器有足够的高度
  .el-table__body-wrapper {
    // 移除 flex: 1，让表格体根据内容自适应高度
    overflow-y: visible; // 移除内部滚动
  }
}

// 优化搜索表单间距
.el-form {
  margin-bottom: 8px;
  
  .el-form-item {
    margin-bottom: 8px; // 减少表单项间距
    
    // 内联表单优化
    &.el-form-item--inline {
      margin-right: 16px;
      margin-bottom: 8px;
    }
  }
  
  // 搜索表单特殊优化
  &.search-form {
    .el-form-item {
      margin-bottom: 6px;
    }
  }
}

// 优化按钮组间距
.el-row.mb8 {
  margin-bottom: 8px;
}

// 优化操作按钮间距
.el-button-group {
  .el-button + .el-button {
    margin-left: 4px;
  }
}

// 优化按钮行间距
.button-row {
  margin-bottom: 6px;
  
  .el-button {
    margin-right: 8px;
    margin-bottom: 4px;
  }
}

// 优化左侧部门树的间距
.head-container {
  background: #fff;
  padding: 8px;
  border-radius: 4px;
  margin-bottom: 8px;
}

// 优化树形组件间距
:deep(.el-tree) {
  // 减少树节点间距
  .el-tree-node {
    margin-bottom: 2px;
    
    .el-tree-node__content {
      height: 32px; // 减少树节点高度
      line-height: 32px;
      padding: 0 8px;
      
      &:hover {
        background-color: #f5f7fa;
      }
    }
    
    .el-tree-node__children {
      margin-left: 16px; // 减少缩进
    }
    
    .el-tree-node__expand-icon {
      width: 16px;
      height: 16px;
      font-size: 12px;
    }
  }
}

// 彻底清除 Element Plus 默认样式
:deep(.el-row) {
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin: 0 !important;
  
  .el-col {
    padding-right: 0 !important;
  }
}

// 覆盖所有可能的 Element Plus 默认 gutter 样式
:deep(.el-row[style*="margin-left"]) {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

// 优化整体布局间距
.row-wrapper {
  margin: 0 !important;
}

.dept-col {
  padding-right: 12px !important;
}

// 优化左侧边栏样式
.el-col:first-child {
  .head-container {
    background: #fafafa;
    border: 1px solid #e4e7ed;
  }
}

// 优化表格容器样式
:deep(.data-table-wrapper) {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  
  // 减少表格容器的内边距
  .el-table {
    border-radius: 4px;
    overflow: hidden;
  }
}

// 优化分页组件间距
:deep(.el-pagination) {
  margin-top: 8px;
  text-align: right;
  
  .el-pagination__sizes,
  .el-pagination__total {
    margin-right: 16px;
  }
}

// 全局对话框表单校验间距优化
:deep(.el-dialog) {
  .el-form {
    .el-form-item {
      margin-bottom: 22px; // 基础间距，为错误信息预留空间
      
      // 当有错误信息时的间距优化
      &.is-error {
        margin-bottom: 24px;
        
        .el-form-item__error {
          margin-top: 2px;
          font-size: 12px;
          line-height: 1.2;
          padding: 0;
          color: #f56c6c;
        }
      }
      
      // 当没有错误信息时，保持紧凑间距
      &:not(.is-error) {
        margin-bottom: 18px;
      }
    }
    
    // 确保行间距一致性
    .el-row {
      margin-bottom: 0;
      
      .el-col {
        padding-left: 8px;
        padding-right: 8px;
        
        &:first-child {
          padding-left: 0;
        }
        
        &:last-child {
          padding-right: 0;
        }
      }
    }
  }
  
  // 对话框内容区域间距
  .el-dialog__body {
    padding: 20px 20px 0 20px;
  }
  
  // 对话框底部按钮间距
  .el-dialog__footer {
    padding: 10px 20px 20px 20px;
    text-align: right;
    
    .el-button + .el-button {
      margin-left: 8px;
    }
  }
}
